<template>
  <div class="index">
    <c-header :active="type" @changeType="getType"></c-header>
    <Swiper
      :carouselArr="bannerArr"
      class="swiper-container-banner"
      v-if="bannerArr && bannerArr.length > 0"
    >
      <swiper-slide class="swiper-slide" v-for="(item, index) in bannerArr" :key="index">
        <router-link :to="{path: '/product', query: {type: type, productType: 0}}">
          <img :src="item.img_url" :alt="item.title" />
        </router-link>
      </swiper-slide>
    </Swiper>
    <template v-if="type == 0">
      <Video></Video>
      <News :newsArr="indexInit.news" :type="type"></News>
      <Product :type="type"></Product>
      <Case :caseArr="indexInit.insp" :type="type"></Case>
    </template>
    <template v-if="type == 1">
      <case-retail :caseArr="indexInit.insp" :type="type"></case-retail>
      <Product :type="type"></Product>
      <News :newsArr="indexInit.news" :type="type"></News>
      <Download :downloadArr="indexInit.download"></Download>
    </template>
    <c-footer :type="type" @changeType="getType"></c-footer>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Swiper from "@/components/Swiper/Swiper";
import Video from "@/components/Video/Video";
import News from "@/components/News/News";
import Product from "@/components/Product/Product";
import Case from "@/components/Case/Case";
import CaseRetail from "@/components/Case/CaseRetail";
import Download from "@/components/download/download";
import { indexList, bannerList } from "@/api/index";
export default {
  name: "index",
  components: {
    Swiper,
    Video,
    News,
    Product,
    Case,
    CaseRetail,
    Download
  },
  data() {
    return {
      bannerArr: [],
      indexInit: {}
    };
  },
  computed: {
    ...mapGetters(["type"])
  },
  mounted() {
    this.getBanner();
    this.getIndexList();
  },
  methods: {
    getType(type) {
      this.$store.dispatch('setType/getType', type)
    },
    getBanner() {
      bannerList().then(res => {
        const { code, msg, data } = res;
        if (code == 200) {
          this.bannerArr = data.rows;
        }
      });
    },
    getIndexList() {
      indexList().then(res => {
        const { code, msg, data } = res;
        if (code == 200) {
          this.indexInit = data;
        }
      });
    }
  }
};
</script>
